<template>
  <div id='shopchange'>
    <div class='addinfo'>
      <div class='addinfobox'>
        <div class='title'>
          {{cominfo}}</div>
        <div
          class='addinfolist'>
          <el-form ref="form"
            :model="form"
            size="medium "
            label-width="80px">
            <el-form-item
              label="*分类ID">
              <el-input
                v-model="form.categoryId">
              </el-input>
            </el-form-item>
            <el-form-item
              label="*父分类ID">
              <el-input
                v-model="form.pCategoryId">
              </el-input>
            </el-form-item>
            <el-form-item
              label="商品名称">
              <el-input
                v-model="form.name">
              </el-input>
            </el-form-item>
            <el-form-item
              label="商品描述">
              <el-input
                v-model="form.desc">
              </el-input>
            </el-form-item>
            <el-form-item
              label="商品价格">
              <el-input
                v-model="form.price">
              </el-input>
            </el-form-item>
            <el-form-item
              label="商品详情">
              <el-input
                type="textarea"
                v-model="form.detail">
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="add">
                修改
              </el-button>
              <el-button
                @click='send'>
                取消
              </el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'shopchange',
  data() {
    return {
      categoryname: '',
      form: {
        categoryId: '',
        pCategoryId: '',
        name: '',
        desc: '',
        price: '',
        detail: '',
        imgs: [],
      },
      dialogVisible: false,
      imglist: [],
    }
  },
  props: ['cominfo', 'shopinfo'],
  methods: {
    send() {
      this.flag = false
      this.$emit('func', this.flag)
    },
    add() {
      this.$axios({
        method: 'post',
        url: '/manage/product/add',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
        },
        params: this.form,
      }).then((res) => {
        if (res.status == 200) {
          this.$message.success('添加商品成功')
          this.$emit('func', this.flag)
          this.$emit('get')
        }
      })
    },
  },
  activated() {
    this.form = {}
    this.shopinfo.detail
    this.form = this.shopinfo
    this.imglist = []
    for (var i = 0; i < this.form.imgs.length; i++) {
      this.imglist.push(this.form.imgs[i])
    }
    for (var key in this.imglist) {
      if (1) {
        let url = this.imglist[key]
        this.imglist[key] = 'http://dingrun.xyz:8082/netmarket/upload/' + url
        url = ''
      }
    }
  },
}
</script>

<style lang='less'>
.block {
  display: inline-block;
}
#shopchange {
  background-color: #fff;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  .addinfo {
    z-index: 999;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    border-radius: 4px;
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    padding-top: 20px;
    box-sizing: border-box;
    .title {
      text-align: center;
      overflow: hidden;
      font-size: 18px;
      font-weight: 700;
    }
    .addinfobox {
      background-color: #fff;
      border-radius: 4px;
      width: 100%;
      height: 100%;
    }
    .addinfolist {
      position: absolute;
      top: 50px;
      left: 50%;
      margin-left: -143px;
    }
  }
  .el-form-item {
    margin-top: 20px;
  }
}
</style>